<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>收入统计</span>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <div>
        <el-row :gutter="24">
          <el-col :span="6">
            <div>
              <el-statistic group-separator="," decimal-separator="." :precision="2" :value="data.amount"
                            title="收益（￥）">
                <i class="el-icon-star-on" style="color:red"></i>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic group-separator="," title="订单数" :value="data.count">
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="block el-statistic" align="center">
              <span class="demonstration head">起始日期</span>
              <div class="con"><span class="number">{{ data.startDate | formatDateTime }}</span></div>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="block el-statistic" align="center">
              <span class="demonstration head">截止日期</span>
              <div class="con"><span class="number">{{ data.endDate | formatDateTime }}</span></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {statistics} from '@/api/order'
import {formatDate, str2Date} from '@/utils/date';

const defaultListQuery = {
  cinemaId: null,
  filmId: null,
  rowPieceId: null,
  pageNum: 1,
  pageSize: 10
};

export default {
  name: 'statistics',
  filters: {
    formatDateTime(time) {
      if (time == null || time === '') {
        return '';
      }
      let date = str2Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      data: {},
    }
  },
  created() {
    this.listQuery.cinemaId = this.$route.params.cinemaId;
    this.listQuery.filmId = this.$route.params.filmId;
    this.listQuery.rowPieceId = this.$route.params.rowPieceId;
    this.getData();
  },
  methods: {
    getData() {
      statistics(this.listQuery).then(res => {
        this.data = res.data;
      });
    },
  }
}
</script>

<style scoped>

</style>
